<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>视频列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery-3.6.0.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f8fa 0%, #e6f0f5 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* 修改为5列均匀分布 */
        .video-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr); /* 固定5列 */
            gap: 20px;
            margin-bottom: 40px;
        }

        /* 视频卡片样式调整 */
        .video-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
            height: 380px;
            display: flex;
            flex-direction: column;
        }

        .video-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
        }

        .video-thumb {
            height: 180px;
            position: relative;
            overflow: hidden;
            flex-shrink: 0;
        }

        .video-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        /* 修改播放按钮为始终显示 */
        .play-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.2); /* 半透明黑色背景 */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .play-icon {
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .play-icon i {
            font-size: 30px;
            color: #1e88e5;
            margin-left: 5px;
        }

        .video-card:hover .play-icon {
            transform: scale(1.1);
            background: rgba(30, 136, 229, 0.9);
        }

        .video-card:hover .play-icon i {
            color: white;
        }

        .video-info {
            padding: 15px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .video-title {
            flex: 1;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        /* 空状态提示 */
        .empty-state {
            grid-column: 1 / -1;
            text-align: center;
            padding: 40px;
            color: #666;
        }

        /* 响应式调整 */
        @media (max-width: 1200px) {
            .video-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 992px) {
            .video-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 768px) {
            .video-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .video-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>视频列表</legend>
    </fieldset>

    <div class="layui-bg-gray" style="padding: 0px;">
        <div class="layui-row layui-col-space15">
            <form action="/videoStu/findAll">
                <div class="layui-input-inline" style="width:300px;">
                    <input type="text" id="key" name="courseName" value="${value}" class="layui-input" placeholder="根据课程名称或视频标题模糊查询">
                </div>&nbsp; &nbsp;&nbsp; &nbsp;
                <button class="layui-btn layui-btn-sm">
                    <i class="layui-icon layui-icon-search"></i>查询
                </button>
            </form>

            <div class="video-grid">
                <c:choose>
                    <c:when test="${not empty pageInfo.list}">
                        <c:forEach items="${pageInfo.list}" var="video">
                            <div class="video-card" url="${video.videoUrl}">
                                <div class="video-thumb">
                                    <img src="https://images.pexels.com/photos/1198802/pexels-photo-1198802.jpeg?auto=compress&cs=tinysrgb&w=600" alt="${video.title}">
                                    <div class="play-overlay">
                                        <div class="play-icon">
                                            <i class="layui-icon layui-icon-play"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="video-info">
                                    <div class="course-name">
                                        <i class="layui-icon layui-icon-app"></i> ${video.courseName}
                                    </div>
                                    <div class="video-title">
                                            ${video.title}
                                    </div>
                                    <div class="upload-time">
                                        <i class="layui-icon layui-icon-date"></i> 上传时间: ${video.getCreatedTimeStr()}
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </c:when>
                    <c:otherwise>
                        <div class="empty-state">
                            <i class="layui-icon layui-icon-tips" style="font-size: 50px; color: #ccc;"></i>
                            <p style="margin-top: 15px; font-size: 16px;">暂无视频数据</p>
                        </div>
                    </c:otherwise>
                </c:choose>
            </div>

            <!--分页-->
            <div id="pagesData"></div>
        </div>
    </div>
</div>

<script>
    $(function () {
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage,
                layer = layui.layer;

            // 分页组件
            laypage.render({
                elem: 'pagesData',
                count: ${pageInfo.total},
                layout: ['count', 'prev', 'page', 'next', 'skip'],
                limit: ${pageInfo.pageSize},
                limits: [5, 10],
                curr: ${pageInfo.pageNum},
                jump: function (obj, first) {
                    if (!first) {
                        if (obj.curr != ${pageInfo.pageNum}) {
                            location.href = "/videoStu/findAll?page=" + obj.curr + "&limit=" + obj.limit + "&courseName=" + $("#key").val();
                        } else if (obj.limit != ${pageInfo.pageSize}) {
                            location.href = "/videoStu/findAll?page=1&limit=" + obj.limit + "&courseName=" + $("#key").val();
                        }
                    }
                }
            });

            // 卡片点击事件 - 修改弹窗位置为左上角偏移
            document.querySelectorAll('.video-card').forEach(card => {
                card.addEventListener('click', function() {
                    const url = $(this).attr("url");
                    layer.open({
                        type: 1,
                        area: ['800px', '480px'],
                        title: false,
                        closeBtn: 0,
                        offset: 'lt', // 关键修改：设置为左上角
                        shade: 0.6,
                        shadeClose: true,
                        anim: 0,
                        content: '<video width="100%" height="100%" src="/videoPlay/' + url + '" autoplay controls></video>'
                    });
                });
            });
        });
    });
</script>
</body>
</html>